<template>
  <div class="special">
    <van-grid :border="false" :column-num="1">
      <van-grid-item v-for="item in data" :key="item.id" class="toplist">
        <van-image :src="item.scene_pic_url" />
        <p>{{ item.title }}</p>
        <p>{{ item.subtitle }}</p>
        <span>{{ item.price_info | RMB }}</span>
      </van-grid-item>
    </van-grid>
    <van-pagination
      @change="click"
      v-model="currentPage"
      :page-count="count"
      :show-page-size="0"
      mode="multi"
    />
  </div>
</template>

<script>
import { GetSpecial } from "@/request/api";
export default {
  data() {
    return {
      data: [],
      currentPage: null,
      count: 0,
    };
  },
  created() {
    GetSpecial({ page: "1", size: "10" }).then((res) => {
      console.log(res);
      this.data = res.data.data;
      console.log(res.data.data);
      this.currentPage = res.data.currentPage;
      this.count = res.data.totalPages;
    });
  },
  methods: {
    click() {
      console.log(this.count);
      // this.currentPage = current;
      GetSpecial({ page: this.currentPage, size: "10" }).then((res) => {
        this.data = res.data.data;
      });
    },
  },

  filters: {
    RMB(val) {
      return `￥${val.toFixed(2)}元`;
    },
  },
};
</script>
 
<style lang = "less" scoped>
.toplist {
  margin-bottom: 0.2rem;
  p {
    padding: 0.1rem 0 0.1rem 0;
  }
  span {
    color: red;
  }
}
.special {
  padding-bottom: 0.4rem;
}
</style>